<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
		<script src="../../plugins/echarts/echarts.js"></script>
		<style scoped>
			body {
				margin: 0;
				padding: 20px;
				font-family: Arial, sans-serif;
			}

			.card-detail {
				padding: 20px;
			}

			.detail-item {
				margin-bottom: 20px;
			}

			.detail-item label {
				font-weight: bold;
			}

			.card-image {
				max-width: 100%;
				height: auto;
				border-radius: 4px;
			}

			.el-button--text {
				/* color: red; */
				color: lightblue;
				margin-top: 15px;
				margin-left: 30px;
			}

			.el-button--text :hover {
				color: aqua;
			}

			.dashboard {
				max-width: 1200px;
				margin: 0 auto;
			}

			.chart-container-day {
				width: 1171px;
				height: 400px;
				margin-bottom: 20px;
			}

			.chart-container-month {
				width: 1171px;
				height: 400px;
				margin-bottom: 20px;
			}

			.chart-container-year {
				width: 1171px;
				height: 400px;
				margin-bottom: 20px;
			}

			.stats-container {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20px;
			}

			.stat-card {
				padding: 20px;
				border-radius: 4px;
				background-color: #f5f7fa;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.stat-card h3 {
				margin-top: 0;
				color: #666;
				font-size: 16px;
			}

			.stat-card .value {
				font-size: 24px;
				font-weight: bold;
				margin: 10px 0;
			}

			.stat-card .compare {
				font-size: 14px;
				color: #999;
			}

			.compare.positive {
				color: #67c23a;
			}

			.compare.negative {
				color: #f56c6c;
			}

			.container {
				max-width: 1240px;
				margin: 0 auto;
				padding: 20px;
				font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
				background-color: #f5f7fa;
			}


			.header {
				margin-bottom: 20px;
			}

			.total-card {
				background-color: #fff;
				padding: 20px;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-bottom: 15px;
			}

			.total-title {
				text-align: center;
				font-size: 16px;
				color: #666;
				margin-bottom: 10px;
			}

			.total-value {

				font-size: 28px;
				font-weight: bold;
				text-align: center;
				color: #333;
			}

			.card-stats {
				background-color: #fff;
				padding: 20px;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-bottom: 15px;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				margin-bottom: 30px;
			}

			.stat-item {
				background-color: #fff;
				padding: 10px;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				text-align: center;
				margin-bottom: 15px;
			}

			.stat-type {
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 15px;
				color: #333;
			}

			.stat-value {
				text-align: center;
				font-size: 24px;
				color: #409EFF;
				margin-bottom: 15px;
			}

			.card-list {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
				gap: 20px;
			}

			.card-item {
				position: relative;
				background-color: #fff;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				cursor: pointer;
				transition: all 0.3s ease;
				transform: translateY(0);
			}

			.card-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			}

			.delete-btn {
				position: absolute;
				top: 5px;
				right: 0px;
				width: 24px;
				height: 24px;
				background: #f56c6c;
				color: white;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 16px;
				font-weight: bold;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				transition: all 0.3s;
				z-index: 10;
				opacity: 0;
				/* 初始状态不可见 */
				transform: scale(0.8);
				/* 初始状态缩小 */
			}

			.card-item:hover .delete-btn {
				opacity: 1;
				/* 完全可见 */
				transform: scale(1);
				/* 正常大小 */
			}

			.delete-btn:hover {
				background: #f78989;
				transform: scale(1.1);
			}

			/* 过渡效果 */
			.fade-enter-active,
			.fade-leave-active {
				transition: all 0.3s ease;
			}

			.fade-enter,
			.fade-leave-to {
				opacity: 0;
				transform: scale(0.8);
			}

			.cards-image {
				width: 100%;
				height: 160px;
				object-fit: cover;
			}

			.card-info {
				padding: 15px;
			}

			.card-name {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.cards-stats {
				font-size: 14px;
				color: #666;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}

			/*去除表格滚动条*/
		</style>
	</head>
	<body>
		<div id="stadium-detail-app">
			<div class="container">
				<!-- 店铺信息模块 -->
				<h1>店铺信息
					<el-button type="primary" size="small" style="float: right; margin-right: 20px;" @click="showEditDialog">
						修改信息
					</el-button>
				</h1>
				<el-card class="card-detail">
					<div class="detail-content">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="detail-item">
									<label>店主名称：</label>
									<span>{{ShopkeeperDetail.username}}</span>
								</div>
							</el-col>
							<el-col :span="24">
								<div class="detail-item">
									<label>店铺名称：</label>
									<span>{{ShopkeeperDetail.shopkeeperName}}</span>
								</div>
							</el-col>

							<el-col :span="24">
								<div class="detail-item">
									<label>店铺等级：</label>
									<span>{{ ShopkeeperDetail.levels }} </span>
								</div>
							</el-col>
							<el-col :span="24">
								<div class="detail-item">
									<label>店主电话：</label>
									<span>{{ ShopkeeperDetail.user.phone }}</span>
								</div>
							</el-col>
							<el-col :span="24">
								<div class="detail-item">
									<label>店主邮箱：</label>
									<span>{{ ShopkeeperDetail.user.email }}</span>
								</div>
							</el-col>
							<el-col :span="24">
								<div class="detail-item">
									<label>开店时间：</label>
									<span>{{ ShopkeeperDetail.createTime }}</span>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="detail-item">
									<label>店铺签名：</label>
									<span>{{ ShopkeeperDetail.remark }}</span>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</div>
			<div class="container">
				<!-- 财务报表模块 -->
				<h1>{{ shopName }} - 经营报表</h1>
				<div class="dashboard">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="日收入统计" name="day">
							<div style="width: 100%;height: 40px;display: flex;justify-content: space-around">
								<div style="width: 33%;height: 100%"></div>
								<div style="width: 33%;height: 100%;text-align: center;line-height: 40px">
									<span style="font-size: 12px;color: #999999">
										数据更新于{{updateDayTime}}
									</span>
								</div>
								<div style="width: 33%;height: 100%;text-align: right;">
									<!-- 年月选择器 -->
									<el-date-picker v-model="selectedYearAndMonth" type="month" placeholder="选择年月" @change="fetchData1"
										:picker-options="pickerOptionMonth"></el-date-picker>
								</div>
							</div>
							<!--日收入报表-->
							<div class="chart-container-day" id="chart-income-day"></div>
						</el-tab-pane>
						<el-tab-pane label="月收入统计" name="month">
							<div style="width: 100%;height: 40px;display: flex;justify-content: space-around">
								<div style="width: 33%;height: 100%"></div>
								<div style="width: 33%;height: 100%;text-align: center;line-height: 40px">
									<span style="font-size: 12px;color: #999999">
										数据更新于{{updateMonthTime}}
									</span>
								</div>
								<div style="width: 33%;height: 100%;text-align: right;">
									<!-- 年选择器 -->
									<el-date-picker v-model="selectedNowYear" type="year" placeholder="选择年" @change="fetchData2"
										:picker-options="pickerOptionYear"></el-date-picker>
								</div>
							</div>
							<!--月收入报表-->
							<div class="chart-container-month" id="chart-income-month"></div>
						</el-tab-pane>
						<el-tab-pane label="年收入统计" name="year">
							<div style="width: 100%;height: 40px;text-align: center;line-height: 40px;">
								<span style="font-size: 12px;color: #999999">
									数据更新于{{updateYearTime}}
								</span>
							</div>
							<!--年收入报表-->
							<div class="chart-container-year" id="chart-income-year"></div>
						</el-tab-pane>
					</el-tabs>
					<!-- 统计卡片 -->
					<div class="stats-container">
						<div class="stat-card" @click="viewAnnualReport(id)" style="cursor: pointer;">
							<h3>本月收入</h3>
							<div class="value">¥{{ formatNumber(stats.currentMonthIncome) }}</div>
							<div class="compare" :class="stats.incomeChange >= 0 ? 'positive' : 'negative'">
								<i :class="stats.incomeChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
								{{ Math.abs(stats.incomeChange) }}% 同比{{ stats.incomeChange >= 0 ? '增长' : '减少' }}
							</div>
						</div>
						<div class="stat-card">
							<h3>续费收入</h3>
							<div class="value">¥{{ formatNumber(stats.renewIncome) }}</div>
							<div class="compare" :class="stats.renewChange >= 0 ? 'positive' : 'negative'">
								<i :class="stats.renewChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
								{{ Math.abs(stats.renewChange) }}% 同比{{ stats.renewChange >= 0 ? '增长' : '减少' }}
							</div>
						</div>
						<div class="stat-card">
							<h3>新购卡收入</h3>
							<div class="value">¥{{ formatNumber(stats.newCardIncome) }}</div>
							<div class="compare" :class="stats.newCardChange >= 0 ? 'positive' : 'negative'">
								<i :class="stats.newCardChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
								{{ Math.abs(stats.newCardChange) }}% 同比{{ stats.newCardChange >= 0 ? '增长' : '减少' }}
							</div>
						</div>
						<div class="stat-card">
							<h3>新增会员数</h3>
							<div class="value">{{ formatNumber(stats.newMembers) }}</div>
							<div class="compare" :class="stats.memberChange >= 0 ? 'positive' : 'negative'">
								<i :class="stats.memberChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
								{{ Math.abs(stats.memberChange) }}% 同比{{ stats.memberChange >= 0 ? '增长' : '减少' }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<!-- 头部总统计 -->
				<div class="header">
					<h1>{{ shopName }} - 会员卡数据报表</h1>
				</div>
				<!-- 总会员卡统计 -->
				<div class="total-card">
					<div class="total-title">本店办理会员卡总数</div>
					<div class="total-value">{{ formatNumber(totalCards) }}张</div>
				</div>
				<!-- 两种会员卡类型统计 -->
				<div class="cards-stats">
					<div class="stat-type">次卡</div>
					<div class="stat-value">
						{{"共计办理会员卡"}}
						{{ciCard}}
						{{"张"}}
					</div>
					<div class="stat-value">
						{{"共计办卡会员"}}
						{{ciCardPeople}}
						{{"名"}}
					</div>
				</div>
				<div class="cards-stats">
					<div class="stat-type">期限卡</div>
					<div class="stat-value">
						{{"共计办理会员卡"}}
						{{(timeCard)}}
						{{"张"}}
					</div>
					<div class="stat-value">
						{{"共计办卡会员"}}
						{{timeCardPeople}}
						{{"名"}}
					</div>
				</div>
				<!-- 会员卡列表 -->
				<h2 style="margin-bottom: 20px;">会员卡列表</h2>
				<div class="card-list">
					<div class="card-item" v-for="card in cardList" :key="card.id" @mouseover="hoverCardId  = card.cardId"
						@mouseleave="hoverCardId  = null" @click="toCardDetail(card.cardId)">

						<transition name="fade">
							<div class="delete-btn" v-show="hoverCardId === card.cardId" @click.stop="handleDeleteCard(card.cardId)">
								×
							</div>
						</transition>
						<img :src="getImage(card.background)" alt="会员卡图片" class="cards-image">
						<div class="card-info">
							<div class="card-name">{{ card.name }}</div>
						</div>
					</div>
					<div v-show="cardList.length===0" style="text-align: center;">
						<p>暂无会员卡信息!!!</p>
					</div>
				</div>
			</div>
			<div class="container">
				<!-- 教师信息模块 -->
				<h1>教师信息</h1>
				<div style="margin-bottom: 20px;">
					<el-button type="primary" @click="addTeachertype('add')">+ 新建老师</el-button>
				</div>
				<!--:data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"-->
				<el-table :data="tableData" stripe class="tableBox" max-height="500px" show-summary
					:summary-method="getTeacherSummary" width="100%" border>
					<el-table-column prop="username" label="教师名称" width="100" align="center"></el-table-column>
					<el-table-column prop="levels" label="等级" width=200" align="center"></el-table-column>
					<el-table-column prop="courseList.length" label="本月课程数" align="center" width="200"></el-table-column>
					<el-table-column label="教师图片" prop="user.images" align="center" width="150">
						<template #default="{ row }">
							<el-image style="width: 100px; height: 100px" :src="getImage(row.user.images)" fit="cover"
								:preview-src-list="[row.user.images]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="user.age" label="年龄" align="center" width="50"></el-table-column>
					<el-table-column prop="user.gender" label="性别" align="center" width="50"></el-table-column>
					<el-table-column prop="user.email" label="邮箱" width="200" align="center"></el-table-column>
					<el-table-column prop="user.phone" label="手机号" width="200" align="center"></el-table-column>
					<el-table-column fixed="right" width="200" align="center">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="medium" placeholder="搜索老师" style="width: 150px;text-align: center;" />
						</template>
						<template slot-scope="scope">
							<el-button type="text" size="small" class="blueBug" @click="addTeachertype(scope.row.teacherId,'detail')"
								v-if="true">详情编辑
							</el-button>
							<el-button type="text" size="small" class="blueBug delBut" @click="statusHandle(scope.row)">
								{{ scope.row.user.status == '0' ? '启用' : '停用' }}
							</el-button>
							<el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--课程模块-->
				<h1 style="margin-top: 30px;">课程信息</h1>
				<el-table
					:data="courseData.filter(data => !searchCourse || data.courseName.toLowerCase().includes(searchCourse.toLowerCase()))"
					stripe style="width: 100%" max-height="500px">
					<el-table-column prop="id" label="序号" type="index" :index="indexMethod" width="50"
						align="center"></el-table-column>
					<el-table-column prop="courseName" label="课程名称" width="100" align="center"></el-table-column>
					<el-table-column label="课程状态" width="100" align="center">
						<template #default="{ row }">
							<el-tag :type="row.status=='上课中'?'success':(row.status=='未开始'?'warning':'danger')">
								{{row.status}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="username" label="授课教师" width="100" align="center"></el-table-column>
					<el-table-column prop="difficulty" label="课程难度" width="100" align="center"></el-table-column>
					<el-table-column prop="duration" label="课程时长" width="100" align="center"></el-table-column>
					<el-table-column prop="type" label="课程类型" width="100" align="center"></el-table-column>
					<el-table-column prop="room" label="上课教室" width="150" align="center"></el-table-column>
					<el-table-column prop="startTime" label="开课时间" width="180" align="center"></el-table-column>
					<el-table-column prop="endTime" label="结课时间" width="180" align="center"></el-table-column>
					<el-table-column label="课程标签" width="200" align="center">
						<template #default="{ row }">
							<el-tag v-for="(tag, index) in (row?.tag || '').split(',').filter(tag => tag.trim())" :key="index"
								style="margin-right: 5px;" :type="index % 3 === 0 ? 'success' : index % 3 === 1 ? 'warning' : 'info'">
								{{ tag.trim() }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="nowPerson" label="报名人数" width="100" align="center"></el-table-column>
					<el-table-column prop="startPerson" label="开课人数" width="100" align="center"></el-table-column>
					<el-table-column prop="maxPerson" label="最大容量" width="100" align="center"></el-table-column>
					<el-table-column width="170" fixed="right">
						<template slot="header" slot-scope="scope">
							<el-input v-model="searchCourse" size="small" placeholder="搜索课程" />
						</template>
						<template #default="{ row }">
							<el-button type="warning" size="mini" @click="handleUpdateCourse(row)">修改</el-button>
							<el-button type="danger" size="mini" @click="handleDeleteCourse(row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-dialog title="修改店铺信息" :visible.sync="editDialogVisible" width="50%" :close-on-click-modal="false">
					<el-form :model="editForm" label-width="120px" ref="editForm" :rules="editRules">
						<el-form-item label="店主名称" prop="name">
							<el-input v-model="editForm.username"></el-input>
						</el-form-item>
						<el-form-item label="店铺名称" prop="name">
							<el-input v-model="editForm.shopkeeperName"></el-input>
						</el-form-item>
						<el-form-item label="店铺等级" prop="levels">
							<el-select v-model="editForm.levels" placeholder="请选择店铺等级">
								<el-option label="普通" value="普通"></el-option>
								<el-option label="银牌" value="银牌"></el-option>
								<el-option label="金牌" value="金牌"></el-option>
								<el-option label="钻石" value="钻石"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="店主电话" prop="phone">
							<el-input v-model="editForm.user.phone"></el-input>
						</el-form-item>
						<el-form-item label="店主邮箱" prop="email">
							<el-input v-model="editForm.user.email" type="email"></el-input>
						</el-form-item>
						<el-form-item label="店铺签名" prop="remark">
							<el-input type="textarea" :rows="3" v-model="editForm.remark" placeholder="请输入店铺简介或签名">
							</el-input>
						</el-form-item>

						<el-form-item label="店铺图片">
							<el-upload class="avatar-uploader" action="http://localhost:8080/common/upload" :show-file-list="false"
								:on-success="handleImageUpload" :before-upload="beforeImageUpload">
								<img v-if="editForm.head" :src="getImage(editForm.head)" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="editDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="submitEditForm">确 定</el-button>
					</span>
				</el-dialog>
				<el-dialog title="修改课程" :visible.sync="dialogVisible" width="30%">
					<el-form :model="form" label-width="80px">
						<el-form-item label="课程名称">
							<el-input v-model="form.courseName"></el-input>
						</el-form-item>
						<el-form-item label="授课老师">
							<el-select v-model="form.username" placeholder="请选择老师">
								<el-option v-for="teacher in tableData" :key="teacher.teacherId" :label="teacher.username"
									:value="teacher.teacherId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="课程标签">
							<el-select v-model="form.tag" multiple placeholder="请选择标签">
								<el-option v-for="tag in tagOptions" :key="tag" :label="tag" :value="tag">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="课程难度">
							<el-select v-model="form.difficulty" placeholder="请选择课程难度">
								<el-option label="简单" value="简单"></el-option>
								<el-option label="中等" value="中等"></el-option>
								<el-option label="困难" value="困难"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="课程类型">
							<el-select v-model="form.type" placeholder="请选择课程类型">
								<el-option label="团课" value="团课"></el-option>
								<el-option label="私教" value="私教"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="课程时长">
							<!--                    <el-input v-model="form.duration"></el-input>-->
							<el-input-number v-model="form.duration" :min="30" :max="150">
							</el-input-number>
							<span>(分钟)</span>
						</el-form-item>
						<el-form-item label="上课教室">
							<el-input v-model="form.room"></el-input>
						</el-form-item>
						<el-form-item label="开课时间">
							<el-date-picker type="datetime" placeholder="选择开课时间" v-model="form.startTime" style="width: 100%;"
								value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
						</el-form-item>
						<el-form-item label="报名人数">
							<el-input v-model="form.nowPerson" disabled></el-input>
						</el-form-item>
						<el-form-item label="开课人数">
							<el-input-number v-model="form.startPerson" :min="0" :max="500"></el-input-number>
							<span>(人)</span>
						</el-form-item>
						<el-form-item label="最大容量">
							<el-input-number v-model="form.maxPerson" :min="1" :max="500"></el-input-number>
							<span>(人)</span>
						</el-form-item>
					</el-form>
					<span slot="footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="submitUpdate">确定</el-button>
					</span>
				</el-dialog>

				<!-- 添加底部空白区域 -->
				<div style="height: 60px;"></div>
			</div>
			<!--     这是原来的#app闭合标签 -->
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<!--<script src="../../plugins/echarts/echarts.js"></script>-->
		<!--<script src="../../plugins/echarts/echarts.min.js"></script>-->
		<script src="../../js/request.js"></script>
		<script src="../../js/validate.js"></script>
		<script src="../../js/index.js"></script>
		<script src="../../api/shopkeeper.js"></script>
		<script src="../../api/stadium.js"></script>
		<script src="../../api/card.js"></script>
		<script src="../../api/statistics.js"></script>
		<script src="../../api/teacher.js"></script>
		<script>
			let tagsOptions = [];
			new Vue({
				el: '#stadium-detail-app',
				data() {
					return {
						baseUrl: "http://127.0.0.1:9000/jiayunplus/",
						id: '', // 保存从URL中获取的id  店铺id  shopkeeperId
						shopName: 'Jiayun健身中心',
						editDialogVisible: false,
						dialogVisible: false,
						search: "",
						searchCourse: "",
						editForm: {
							username: '',
							shopkeeperName: '',
							levels: '',
							user: {
								phone: "",
								email: ""
							}
						},
						tableData: [{
							username: '',
							levels: "",
							courseList: {},
							user: ""
						}],
						ShopkeeperDetail: {},
						chart: null,
						ciCard: 0,
						ciCardPeople: 0,
						timeCard: 0,
						timeCardPeople: 0,
						stats: {
							currentMonthIncome: 0,
							renewIncome: 0,
							newCardIncome: 0,
							newMembers: 0,
							incomeChange: 0,
							renewChange: 0,
							newCardChange: 0,
							memberChange: 0
						},
						monthlyData: [],
						courseData: [],
						totalCards: 0,
						cardTypeStats: [],
						cardList: [],
						imageURL: '',
						imageUrl: '',
						editRules: {
							// name: [
							//     {required: true, message: '请输入店铺名称', trigger: 'blur'},
							//     {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
							// ],
							// phone: [
							//     {required: true, message: '请输入联系电话', trigger: 'blur'},
							//     {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
							// ],
						},
						showDeleteBtn: null,
						hoverCardId: null,
						form: { // 新增课程表单数据
							id: '',
							courseName: '',
							tag: "",
							teacherName: '',
							count: ''
						},
						deleteForm: {
							id: '',
							courseName: '',
							tag: "",
							teacherName: '',
							count: ''
						},
						numCardMemberCount: 0, //次卡会员数
						timeCardMemberCount: 0, //期限卡会员数
						teacherNameList: [],
						tagOptions: [], // 示例标签选项
						activeName: "day",
						//当前年月
						selectedYearAndMonth: new Date(),
						//制定选中规则
						pickerOptionMonth: {
							disabledDate(time) {
								return time.getTime() > Date.now();
							}
						},
						//当前年
						selectedNowYear: new Date(),
						// 制定选中规则
						pickerOptionYear: {
							disabledDate(time) {
								return time.getTime() > Date.now();
							}
						},
						//日总收入
						daysIncome: {
							dataIncome: [],
							dataTime: []
						},
						//月总收入
						monthsIncome: {
							dataIncome: [],
							dataTime: []
						},
						//年总收入
						yearsIncome: {
							dataIncome: [],
							dataTime: []
						},
						//更新经营报表的时间
						updateDayTime: "",
						updateMonthTime: "",
						updateYearTime: ""
					};
				},
				computed: {
					rules() {
						return {
							'name': [{
								'required': true,
								'message': '请填写名称',
								'trigger': 'blur'
							}],

							'price': [{
								'required': true,
								validator: (rules, value, callback) => {
									if (!value) {
										callback(new Error('请填写价格'))
									} else {
										const reg = /^\d+(\.\d{0,2})?$/;
										if (reg.test(value)) {
											if (value < 10000) {
												callback()
											} else {
												callback(new Error('价格小于10000'))
											}
										} else {
											callback(new Error('价格格式只能为数字,且最多保留两位小数'))
										}
									}
								},
								'trigger': 'blur'
							}],
						}
					},
					currentMonth() {
						return new Date().getMonth() + 1;
					}
				},
				created() {
					const urlParams = new URLSearchParams(window.location.search);
					this.id = urlParams.get('id'); // 从URL中获取id并保存到data中
					if (!this.id) {
						console.error('未获取到shopkeeper_id');
						// 可以添加错误处理，如重定向回原页面
					}
					getTagListByType("课程").then(
						res => {
							this.tagOptions = res.data
						}
					)
					this.init();
					this.fetchCardList(); //查询会员卡列表
					this.fetchCardStats(); //查询总数
					this.getTeacher(); //查询老师信息
					this.getCourse(); //查询课程信息
					setTimeout(() => {
						//进入页面，优先默认统计日收入
						this.initChart();
					}, 1000)
				},
				mounted() {
					this.initChart();
					this.fetchData();
					this.updateStats();
				},
				methods: {
					//选择年月，统计日收入
					fetchData1() {
						this.initChart();
					},
					//选择年，统计月收入
					fetchData2() {
						this.initChartOfMonths()
					},
					//点击，分别展示不同类型的收入
					handleClick(tab) {
						// console.log(tab);
						//选择的是什么类型的统计方式：tab.name
						console.log(tab.name)
						if (tab.name === "month") {
							//月收入
							this.initChartOfMonths()
						}
						if (tab.name === "year") {
							//年收入
							this.initChartOfYears();
						}
						if (tab.name === "day") {
							//日收入
							this.initChart();
						}
					},
					//序号
					indexMethod(index) {
						return index + 1;
					},
					//统计老师+课程数量
					getTeacherSummary(param) {
						const {
							columns,
							data
						} = param;
						const sums = [];
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[0] = '合计';
								return;
							}
							//计算老师数量
							else if (index === 1) {
								var teacherNum = 0;
								data.map(item => {
									teacherNum += 1;
								})
								sums[1] = "老师共计" + teacherNum + "人";
							}
							//计算课程总数量
							else if (index === 2) {
								var courseNum = 0;
								data.map(item => {
									courseNum += item.courseList.length;
								})
								sums[2] = "课程共计" + courseNum + "个";
							} else {
								sums[index] = '';
							}
						});
						return sums;
					},
					getImage(it) {
						return this.baseUrl + "" + it
					},
					beforeImageUpload(file) {
						const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
						const isLt2M = file.size / 1024 / 1024 < 2;

						if (!isJPG) {
							this.$message.error('上传图片只能是 JPG/PNG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传图片大小不能超过 2MB!');
						}
						return isJPG && isLt2M;
					},
					handleImageUpload(res, file) {
						if (res.code === 1) {
							this.imageURL = URL.createObjectURL(file.raw);
							// 保存服务器返回的图片路径
							this.editForm.head = res.data;
							this.imageUrl = `/common/download?name=${res.data}`;
						} else {
							this.$message.error('图片上传失败');
						}
					},

					viewCourseDetail(courseId) {
						// const url = `page/shopkeeper/course-detail.html?courseId=${encodeURIComponent(courseId)}&shopkeeperId=${encodeURIComponent(shopkeeperId)}`;
						const url = `page/shopkeeper/course-detail.html?courseId=` + courseId + `&shopkeeperId=` + this.id;
						try {
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '课程详情', '3');
							} else {
								// 备用方案
								window.location.href = url;
							}
						} catch (error) {
							console.error('跳转失败:', error);
						}
					},

					async init() {
						queryShopKeeperById(this.id).then(res => {
							console.log(res);
							if (String(res.code) === '1') {
								this.ShopkeeperDetail = res.data
								console.log("  this.ShopkeeperDetail:" + this.ShopkeeperDetail.user.phone)
							} else {
								this.$message.error(res.msg || '操作失败')
							}
						})
					},
					handleQuery() {
						this.page = 1;
						this.init();
					},
					statusHandle(row) {
						this.$confirm(`确认${row.user.status == '0' ? '启用' : '停用'}该账号?`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							enableOrDisableStatus({
								userId: row.userId, // 直接使用 row.id，避免中间变量
								status: row.user.status == '0' ? 1 : 0 // 明确状态转换逻辑
							}).then(res => {
								if (String(res.code) === '1') {
									this.$message.success('状态更新成功');
									// row.user.status = row.user.status == '0' ? '1' : '0';
									this.getTeacher();
									// this.init(); // 刷新数据
								} else {
									this.$message.error(res.msg || '操作失败');
								}
							}).catch(err => {
								this.$message.error('请求错误: ' + (err.message || err));
							});
						}).catch(() => {
							this.$message.info('已取消操作');
						});
					},

					addTeachertype(st, source = 'detail') {
						if (st === 'add') {
							console.log("新增老师")
							const url = `page/teacher/add.html?id=${encodeURIComponent(this.id)}`;
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '添加老师', '4');
							} else {
								// 备用方案
								window.location.href = url;
							}
						} else {
							console.log("修改老师")
							const url =
								`page/teacher/update.html?userId=${encodeURIComponent(st)}&source=${encodeURIComponent(source)}&id=${encodeURIComponent(this.id)}`;
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '修改老师', '4');
							} else {
								// 备用方案
								window.location.href = url;
							}
							// window.parent.menuHandle({
							// 	id: '4',
							// 	url: `page/teacher/update.html?userId=${st}&source=${source}&id=${id}`,
							// 	name: '修改老师'
							// },true,'12',{
							// 	userId: st,
							// 	source: source,
							// 	id: id
							// })
						}
					},
					deleteHandle(row) {
						console.log(row.userId)
						this.$confirm('确认删除该老师, 是否继续?', '确定删除', {
							'confirmButtonText': '确定',
							'cancelButtonText': '取消',
						}).then(() => {
							deleteTeacher(row.user.userId).then(res => {
								console.log(res)
								if (res.code === 1) {
									this.$message.success('删除成功！');
									this.getTeacher(); // 调用获取教师列表的方法
									isDelted = 1;
									this.handleQuery()
								} else {
									this.$message.error(res.msg || '操作失败')
								}
							}).catch(err => {
								this.$message.error('请求出错了：' + err)
							})
						})
					},

					selectTdetail(teacherId) {
						const url = `page/stadium/tdetail.html?id=${encodeURIComponent(teacherId)}`;
						try {
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '教师详情', '3');
							} else {
								// 备用方案
								window.location.href = url;
							}
						} catch (error) {
							console.error('跳转失败:', error);
						}
					},
					getTeacher() {
						getTeachersOfShopkeeper(this.id).then(res => { //请求结果处理
							if (res.code === 1) {
								this.tableData = res.data.map(teacher => ({
									...teacher,
									images: `/common/download?name=${teacher.user.images}`
								}));
							}
						})
					},
					getCourse() {
						getCourseOfShopkeeper(this.id).then(res => {
							if (String(res.code) === '1') {
								this.courseData = res.data
								console.log(this.courseData)
							} else {
								this.$message.error(res.msg)
							}
						})
					},
					viewAnnualReport() {
						const url = `page/stadium/annual-report.html?id=${encodeURIComponent(this.id)}`;
						try {
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '年收益统计', '3');
							} else {
								// 备用方案
								window.location.href = url;
							}
						} catch (error) {
							console.error('跳转失败:', error);
						}
					},


					handleCheckAllChange(val) {
						this.ruleForm.tags = val ? tagsOptions : []
						this.isIndeterminate = false;
						console.log(this.ruleForm.tags)

					},
					handleCheckedCitiesChange(value) {
						let checkedCount = value.length;
						this.checkAll = checkedCount === this.tags.length;
						this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
						this.ruleForm.tags = value
						console.log(this.ruleForm.tags)
					},

					handleAvatarSuccess(response, file, fileList) {
						// 拼接down接口预览
						if (response.code === 0 && response.msg === '未登录') {
							window.top.location.href = '../login/login.html'
						} else {
							this.imageUrl = `/common/download?name=${response.data}`;
							this.ruleForm.image = response.data
						}
					},

					onChange(file) {
						if (file) {
							const suffix = file.name.split('.')[1];
							const size = file.size / 1024 / 1024 < 2;
							if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
								this.$message.error('上传图片只支持 png、jpeg、jpg 格式！');
								this.$refs.upload.clearFiles();
								return false
							}
							if (!size) {
								this.$message.error('上传文件大小不能超过 2MB!');
								return false
							}
							return file
						}
					},

					//统计日收入  统计 某年某月 的收入，每日的详情收入情况
					initChart() {
						try {
							//传递参数 年、月、店铺id，调用方法，查询收入情况
							const params = {
								//日
								// day: this.selectedYearAndMonth.getFullYear(),
								//年
								year: this.selectedYearAndMonth.getFullYear(),
								//月
								month: this.selectedYearAndMonth.getMonth() + 1,
								//店铺id
								shopkeeperId: this.id
							}
							getIncome(params).then(res => {
								if (res.code === 1) {
									console.log("查询到日收入--------------")
									console.log(res.data)
									//将获取到的数据进行赋值
									//本月有多少天就统计多少个数据
									var data1 = []; //存储x轴的值，即为月份
									var data2 = []; //存储y轴的值，即为日收入
									//判断是本年本月还是其他月份？
									var nowYear = new Date().getFullYear();
									var nowMonth = new Date().getMonth() + 1
									//如果是本年本月,查询即可
									if (params.year === nowYear && params.month === nowMonth) {
										for (let i = 1; i <= new Date().getDate(); i++) {
											for (let j = 0; j < res.data.length; j++) {
												//如果遍历到有该天的收入信息，则加入数组
												if (i.toString() === res.data[j].incomeDay) {
													data1.push(i);
													data2.push(res.data[j].income)
													break;
												}
												//如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
												if ((j + 1) === res.data.length) {
													data1.push(i);
													data2.push(0)
												}
											}
										}
										//赋值给日收入和月份
										this.daysIncome.dataTime = data1
										this.daysIncome.dataIncome = data2

										console.log("计算出的日收入情况：---------")
										console.log(data1)
										console.log(data2)
									} else {
										//如果不是本年本月，那么需要统计一整月的数据，所以就需要知道当前月有多少天
										for (let i = 1; i <= new Date(params.year, params.month, 0).getDate(); i++) {
											for (let j = 0; j < res.data.length; j++) {
												//如果遍历到有该天的收入信息，则加入数组
												if (i.toString() === res.data[j].incomeDay) {
													data1.push(i);
													data2.push(res.data[j].income)
													break;
												}
												//如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
												if ((j + 1) === res.data.length) {
													data1.push(i);
													data2.push(0)
												}
											}
										}
										//赋值给日收入和月份
										this.daysIncome.dataTime = data1
										this.daysIncome.dataIncome = data2

										console.log("计算出的日收入情况：---------")
										console.log(data1)
										console.log(data2)
									}
									//报表显示
									var myChart = echarts.init(document.getElementById('chart-income-day'));
									var option = {
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'shadow'
											}
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										xAxis: [{
											type: 'category',
											// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
											data: this.daysIncome.dataTime,
											axisTick: {
												alignWithLabel: true
											}
										}],
										yAxis: [{
											type: 'value'
										}],
										series: [{
											name: '收入',
											type: 'bar',
											barWidth: '60%',
											// data: [100, 520, 20, 334, 690, 330, 220]
											data: this.daysIncome.dataIncome
										}]
									};
									myChart.setOption(option);
									//完毕之后，返回更新数据的时间
									this.updateDayTime = new Date().toLocaleString()
									// this.initChart();
								} else {
									this.$message.error(res.msg || '获取数据失败');
								}
							})
						} catch (err) {
							this.$message.error('请求出错: ' + err.message);
						}
					},
					//统计月收入  统计 某年每个月的收入，每月的详情收入情况
					initChartOfMonths() {
						try {
							//传递参数 年、月、店铺id，调用方法，查询收入情况
							const params = {
								//年
								year: this.selectedNowYear.getFullYear(),
								//店铺id
								shopkeeperId: this.id
							}
							getIncome(params).then(res => {
								if (res.code === 1) {
									console.log("查询到日收入--------------")
									console.log(res.data)
									//将获取到的数据进行赋值
									//本月有多少天就统计多少个数据
									var data1 = []; //存储x轴的值，即为月份
									var data2 = []; //存储y轴的值，即为日收入
									//判断是本年还是其他年？
									var nowYear = new Date().getFullYear();
									//如果是本年,查询即可
									if (params.year === nowYear) {
										for (let i = 1; i <= new Date().getMonth() + 1; i++) {
											for (let j = 0; j < res.data.length; j++) {
												//如果遍历到有该天的收入信息，则加入数组
												if (i.toString() === res.data[j].incomeMonth) {
													data1.push(i);
													data2.push(res.data[j].income)
													break;
												}
												//如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
												if ((j + 1) === res.data.length) {
													data1.push(i);
													data2.push(0)
												}
											}
										}
										//赋值给日收入和月份
										this.monthsIncome.dataTime = data1
										this.monthsIncome.dataIncome = data2
										console.log("计算出的月收入情况：---------")
										console.log(data1)
										console.log(data2)
									} else {
										//如果不是本年，那么需要统计一整年的数据
										for (let i = 1; i <= 12; i++) {
											for (let j = 0; j < res.data.length; j++) {
												//如果遍历到有该天的收入信息，则加入数组
												if (i.toString() === res.data[j].incomeMonth) {
													data1.push(i);
													data2.push(res.data[j].income)
													break;
												}
												//如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
												if ((j + 1) === res.data.length) {
													data1.push(i);
													data2.push(0)
												}
											}
										}
										//赋值给日收入和月份
										this.monthsIncome.dataTime = data1
										this.monthsIncome.dataIncome = data2

										console.log("计算出的日收入情况：---------")
										console.log(data1)
										console.log(data2)
									}
									//报表显示
									var myChart = echarts.init(document.getElementById('chart-income-month'));
									var option = {
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'shadow'
											}
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										xAxis: [{
											type: 'category',
											// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
											data: this.monthsIncome.dataTime,
											axisTick: {
												alignWithLabel: true
											}
										}],
										yAxis: [{
											type: 'value'
										}],
										series: [{
											name: '收入',
											type: 'bar',
											barWidth: '60%',
											// data: [100, 520, 20, 334, 690, 330, 220]
											data: this.monthsIncome.dataIncome
										}]
									};
									myChart.setOption(option);
									this.updateMonthTime = new Date().toLocaleString()
									// this.initChart();
								} else {
									this.$message.error(res.msg || '获取数据失败');
								}
							})
						} catch (err) {
							this.$message.error('请求出错: ' + err.message);
						}
					},
					//统计年收入  统计近几年的收入情况
					initChartOfYears() {
						try {
							//传递参数 年、月、店铺id，调用方法，查询收入情况
							const params = {
								//店铺id
								shopkeeperId: this.id
							}
							getIncome(params).then(res => {
								if (res.code === 1) {
									console.log("查询到年收入--------------")
									console.log(res.data)
									var data1 = []; //存储x轴的值，即为年
									var data2 = []; //存储y轴的值，即为总收入
									//获取当前年
									var fullYear = new Date().getFullYear();
									//查询近五年的收入情况
									for (let i = fullYear - 4; i <= fullYear; i++) {
										for (let j = 0; j < res.data.length; j++) {
											//如果遍历到该年收入信息，则加入数组
											if (i.toString() === res.data[j].incomeYear) {
												data1.push(i);
												data2.push(res.data[j].income)
												break;
											}
											//如果到了最后一位了，还没赋值，则说明本年无收入的相关数据，则赋值为0
											if ((j + 1) === res.data.length) {
												data1.push(i);
												data2.push(0)
											}
										}
									}
									//赋值给日收入和月份
									this.yearsIncome.dataTime = data1
									this.yearsIncome.dataIncome = data2

									console.log("计算出的月收入情况：---------")
									console.log(data1)
									console.log(data2)

									//报表显示
									var myChart = echarts.init(document.getElementById('chart-income-year'));
									var option = {
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'shadow'
											}
										},
										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										xAxis: [{
											type: 'category',
											// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
											data: this.yearsIncome.dataTime,
											axisTick: {
												alignWithLabel: true
											}
										}],
										yAxis: [{
											type: 'value'
										}],
										series: [{
											name: '收入',
											type: 'bar',
											barWidth: '60%',
											// data: [100, 520, 20, 334, 690, 330, 220]
											data: this.yearsIncome.dataIncome
										}]
									};
									myChart.setOption(option);
									this.updateYearTime = new Date().toLocaleString()
									// this.initChart();

								} else {
									this.$message.error(res.msg || '获取数据失败');
								}
							})
						} catch (err) {
							this.$message.error('请求出错: ' + err.message);
						}
					},
					//获取收入数据信息
					async fetchData() {
						try {
							//传递参数
							const res = await getIncome({
								//下拉框中选择的数据
								time: this.selectedTime,
								//店铺id
								id: this.id
							});
							if (res.code === 1) {

								this.initChart();
							} else {
								this.$message.error(res.msg || '获取数据失败');
							}
						} catch (err) {
							this.$message.error('请求出错: ' + err.message);
						}
					},
					// 处理月份数据
					processMonthlyData(data) {

						// const now = new Date();
						// const currentYear = now.getFullYear();
						// const currentMonth = now.getMonth() + 1;
						// const allMonths = Array.from({length: 12}, (_, i) => {
						//     const month = i + 1;
						//     return {
						//         month: `${month}月`,
						//         income: 0,
						//         isCurrent: this.selectedYear === currentYear && month === currentMonth
						//     };
						// });

						// 	填充实际数据
						// data.forEach(item => {
						//     const monthNum = parseInt(item.month.replace('月', ''));
						//     const index = monthNum - 1;
						//     allMonths[index].income = item.income;
						//     allMonths[index].isCurrent = this.selectedYear === currentYear && monthNum === currentMonth;
						// });

						// return allMonths;
					},
					async updateStats() {
						try {
							const res = await getMonthlyStats({
								id: this.id
							});
							if (res.code === 1) {
								this.stats = {
									currentMonthIncome: res.data.currentMonthIncome || 0,
									renewIncome: res.data.renewIncome || 0,
									newCardIncome: res.data.newCardIncome || 0,
									newMembers: res.data.newMembers || 0,
									incomeChange: res.data.incomeChange || 0,
									renewChange: res.data.renewChange || 0,
									newCardChange: res.data.newCardChange || 0,
									memberChange: res.data.memberChange || 0
								};
							}
						} catch (err) {
							console.error('获取统计数据失败:', err);
						}
					},
					// 柱状图配置
					updateChart() {
						const option = {
							title: {
								text: `${this.selectedYear}年月度营业额`,
								left: 'center'
							},
							tooltip: {
								trigger: 'axis',
								formatter: '{b}<br/>营业额: ¥{c}'
							},
							xAxis: {
								type: 'category',
								data: this.monthlyData.map(item => item.month)
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									formatter: '¥{value}'
								}
							},
							series: [{
								data: this.monthlyData.map(item => ({
									value: item.income,
									itemStyle: {
										color: item.isCurrent ? '#67C23A' : '#409EFF' // 当前月份绿色高亮
									}
								})),
								type: 'bar',
								label: {
									show: true,
									position: 'top',
									formatter: params => params.value ?
										`¥${this.formatNumber(params.value)}` : ''
								},
								emphasis: { // 鼠标悬停效果
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						this.chart.setOption(option);
					},
					formatNumber(num) {
						return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					},
					fetchCardStats() {
						getCardStats({
								id: this.id
							})
							.then(res => {
								if (res.code === 1) {
									//返回卡类型及办理情况信息
									this.cardTypeStats = res.data || {};
									//计算本店铺所办理的所有会员卡数量
									this.totalCards = res.data.allCount;
									this.timeCard = res.data.timeCard;
									this.timeCardPeople = res.data.timeCardPeople;
									this.ciCard = res.data.ciCard;
									this.ciCardPeople = res.data.ciCardPeople;

									//获取次卡会员数量  numCardMemberCount
									// if (res.data.numCard !== null) {
									//     var num1 = []
									//     for (var i = 0; i < res.data.numCard.length; i++) {
									//         console.log(res.data.numCard[i]);
									//         if (!num1.includes(res.data.numCard[i].memberId)) {
									//             num1.push(res.data.numCard[i].memberId);
									//         }
									//     }
									//     //赋值
									//     this.numCardMemberCount = num1.length;
									// } else {
									//     this.numCardMemberCount = 0
									// }
									/*---------------------------------------------------------------------------*/
									//获取期限卡会员数量  timeCardMemberCount
									// if (res.data.timeCard !== null) {
									//     var num2 = [];
									//     for (var i = 0; i < res.data.timeCard.length; i++) {
									//         if (!num2.includes(res.data.timeCard[i].memberId)) {
									//             num2.push(res.data.timeCard[i].memberId);
									//         }
									//     }
									//     //赋值
									//     this.timeCardMemberCount = num2.length;
									// } else {
									//     this.timeCardMemberCount = 0
									// }
								}
							})
					},
					//获取会员卡列表
					fetchCardList() {
						getCards({
							id: this.id
						}).then(res => {
							if (res.code === 1) {
								this.cardList = res.data.map(card => ({
									...card,
									background: card.background
								}));
								console.log(this.cardList);
							}
						})
					},
					toCardDetail(id) {
						const url = `page/shopkeeper/cardDetail.html?cardId=${encodeURIComponent(id)}`;
						try {
							if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
								window.parent.safeNavigateTo(url, '会员卡详情', '3');
							} else {
								// 备用方案
								window.location.href = url;
							}
						} catch (error) {
							console.error('跳转失败:', error);
						}

					},
					handleUpdateCourse(row) {
						this.form = {
							...row, // 展开所有课程属性
							tag: row.tag ? row.tag.split(',') : [] // 保持标签处理逻辑
						};
						console.log(this.form)
						this.dialogVisible = true;
					},
					submitUpdate() {
						// 构造符合后端接口的参数格式
						const params = {
							...this.form,
							tag: this.form.tag.toString(),
						};
						console.log(params)
						updateCourse(params).then(res => {
							if (res.code === 1) {
								this.$message.success('修改成功');
								this.dialogVisible = false;
								this.getCourse(); // 强制刷新课程数据
							} else {
								this.$message.error(res.msg);
							}
						});
					},
					handleDeleteCourse(row) { // 使用正确的courseId参数名
						this.deleteForm = {
							...row, // 展开所有课程属性
							tag: row.tag ? row.tag.split(',') : [] // 保持标签处理逻辑
						};
						const params = {
							...this.deleteForm,
							tag: this.deleteForm.tag.toString(),
						};
						this.$confirm('确定要删除该课程吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							deleteCourse(params).then(res => { // 传递正确的courseId
								if (res.code === 1) {
									this.$message.success('删除成功');
									this.getCourse();
								} else {
									this.$message.error(res.msg);
								}
							});
						}).catch(() => {});
					},
					handleHideCourse(courseId) {
						this.$confirm('确定要隐藏该课程吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							hideCourse(courseId).then(res => { // 确保调用 statistics.js 中的 hideCourse 方法
								if (res.code === 1) {
									this.$message.success('隐藏成功');
									this.getCourse(); // 刷新课程列表
								} else {
									this.$message.error(res.msg || '隐藏失败');
								}
							}).catch(err => {
								this.$message.error('请求出错: ' + err.message);
							});
						}).catch(() => {});
					},
					showEditDialog() {
						this.editForm = this.ShopkeeperDetail;
						this.editDialogVisible = true;
					},
					submitEditForm() {
						console.log(this.editForm)
						this.$refs.editForm.validate(valid => {
							if (valid) {
								updateShopkeeperInfo({
									...this.editForm
								}).then(res => {
									if (res.code === 1) {
										this.$message.success('修改成功');
										this.ShopkeeperDetail = {
											...this.ShopkeeperDetail,
											...this.editForm
										};
										this.editDialogVisible = false;
									} else {
										this.$message.error(res.msg || '修改失败');
									}
								}).catch(err => {
									this.$message.error('请求失败');
									console.error(err);
								});
							} else {
								this.$message.error('表单验证失败');
								return false;
							}
						});
					},
					handleDeleteCard(cardId) {
						this.$confirm('确定要删除此会员卡吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							deleteCard({
								cardId: cardId
							}).then(res => {
								if (res.code === 1) {
									this.$message.success('删除成功');
									this.fetchCardList(); // 重新加载列表
								} else {
									this.$message.error(res.msg || '删除失败');
								}
							});
						}).catch(() => {
							this.$message.info('已取消删除');
						});
					},
				}
			})
		</script>
	</body>
</html>